<!--  -->
<template>
  <div class="login">
    <header class="login-header">
      <div class="login-container">
        <div class="login-top">
          <img src="../../assets/images/top_logo.png" alt="" />
          <span>有人通行证</span>
        </div>
      </div>
    </header>
    <section class="login-main">
      <div class="login-container">
        <el-card class="box-card">
          <div class="login-main-card">
            <img
              src="../../assets/images/login_sign_img.png"
              alt=""
              class="login-main-img"
            />
            <div class="login-main-form">
              <p class="login-main-form-title">有人通行证</p>
              <div>
                <el-form
                  :model="accountLoginForm"
                  :rules="accountRules"
                  ref="accountLoginForm"
                >
                  <el-form-item label="" prop="username">
                    <el-input
                      v-model="accountLoginForm.username"
                      placeholder="手机号码/邮箱/用户名"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="" prop="password">
                    <el-input
                      v-model="accountLoginForm.password"
                      placeholder="密码"
                    ></el-input>
                  </el-form-item>
                  <el-form-item>
                    <el-button
                      type="primary"
                      size="medium"
                      class="login-btn"
                      @click="handleLogin"
                      >登录</el-button
                    >
                  </el-form-item>
                </el-form>
              </div>
            </div>
          </div>
        </el-card>
      </div>
    </section>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  name: "Login",
  //import引入的组件需要注入到对象中才能使用
  components: {},
  data() {
    //这里存放数据
    return {
      accountLoginForm: {
        username: "",
        password: ""
      },
      accountRules: {
        username: [
          {
            required: true,
            message: "请输入手机号码/邮箱/用户名",
            trigger: "blur"
          }
        ],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }]
      },
      redirect: undefined
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {
    $route: {
      handler: function(route) {
        const query = route.query;
        if (query) {
          this.redirect = query.redirect;
          this.otherQuery = this.getOtherQuery(query);
        }
      },
      immediate: true
    }
  },
  //方法集合
  methods: {
    handleLogin() {
      this.$refs.accountLoginForm.validate(valid => {
        if (valid) {
          this.$store
            .dispatch("user/login", this.accountLoginForm)
            .then(() => {
              this.$router.push({
                path: this.redirect || "/",
                query: this.otherQuery
              });
            })
            .catch(() => {});
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    getOtherQuery(query) {
      return Object.keys(query).reduce((acc, cur) => {
        if (cur !== "redirect") {
          acc[cur] = query[cur];
        }
        return acc;
      }, {});
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {},
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.login {
  background: url("~@/assets/images/login-pass-bg.png") no-repeat fixed center;
  background-size: 100% 100%;
  height: 100%;
  position: fixed;
  width: 100%;
  .login-container {
    width: 62.5%;
    margin: 0 auto;
  }
  .login-header {
    background: #060a13;
    height: 55px;
    line-height: 55px;
    .login-container {
      .login-top {
        display: flex;
        align-items: center;
        color: #fff;
        span {
          margin-left: 1vw;
        }
      }
    }
  }
  .login-main {
    padding-top: 23vh;
    .login-container {
      .login-main-card {
        padding: 2.5%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .login-main-img {
          width: 28.3vw;
        }
        .login-main-form {
          width: 21.3vw;
          display: inline-block;
          .login-main-form-title {
            font-size: 24px;
            color: #333;
            letter-spacing: 0;
            text-align: center;
          }
          .login-btn {
            width: 100%;
          }
        }
      }
    }
  }
}
</style>
